<route lang="json5" type="page">
{
  layout: 'tabbar',
  needLogin: true,
  style: {
    navigationBarTitleText: '个人中心',
  },
}
</route>

<template>
  <view class="page-container">
    <!-- 用户信息栏 -->
    <view class="user-header">
      <view class="user-info">
        <view class="user-left">
          <image class="avatar" :src="userStore.userInfo.avatarUrl" mode="aspectFill" />
          <view class="user-meta">
            <text class="username">
              {{ userStore.userInfo.nickname ? userStore.userInfo.nickname : '未登录用户' }}
            </text>
            <view class="vip-tag">
              <text>UID:</text>
              <text>{{ userStore.userInfo.id }}</text>
              <!-- <wd-icon name="arrow-right" size="28rpx" color="#fff" /> -->
            </view>
          </view>
        </view>
        <view class="user-right" @click="goUserSettings">
          <view class="tabbar-shezhi iconfont c-white"></view>
          <view class="tip">设置</view>
        </view>
      </view>
    </view>

    <!-- 订单状态 -->
    <view class="order-card">
      <view class="order-header">
        <text class="title">我的订单</text>
        <view class="view-all" @click="navigateToOrder('/pages/order/index', 0)">
          <text>查看全部</text>
          <wd-icon name="arrow-right" size="28rpx" />
        </view>
      </view>
      <view class="order-status">
        <view
          v-for="(item, index) in orderStates"
          :key="index"
          class="status-item"
          @click="navigateToOrder('/pages/order/index', item.type)"
        >
          <!-- <wd-icon :name="item.icon" size="48rpx" :color="item.color" /> -->
          <i :class="'iconfont ' + item.icon" :style="{ fontSize: '48rpx' }"></i>
          <text class="status-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="function-list">
      <view class="grid-item" v-for="item in functions" :key="item.text">
        <view
          class="item-content"
          v-if="item.icon != 'icon-kefuguanli'"
          @click="navigateTo(item.path)"
        >
          <i :class="'iconfont ' + item.icon" :style="{ fontSize: '48rpx' }"></i>
          <text class="item-text">{{ item.text }}</text>
        </view>
        <view class="item-content" v-else @click="handleQQService">
          <i :class="'iconfont ' + item.icon" :style="{ fontSize: '48rpx' }"></i>
          <text class="item-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 客服横幅 -->
    <view class="service-banner">
      <image class="banner-image" src="/static/my/service-banner.png" mode="aspectFill" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const orderStates = ref([
  { type: 1, icon: 'icon-daifukuan', text: '待付款', path: '/pages/order/index' },
  { type: 1, icon: 'icon-daifahuo', text: '待发货', path: '/pages/order/index' },
  { type: 1, icon: 'icon-daishouhuo', text: '待收货', path: '/pages/order/index' },
  { type: 2, icon: 'icon-daipingjia', text: '待评价', path: '/pages/order/index' },
])

const functions = ref([
  { icon: 'icon-lingjuanzhongxin', text: '领卷中心', path: '/pages/coupon/coupon' },
  { icon: 'icon-youhuijuan', text: '优惠券', path: '/pages/coupon/my-coupon' },
  // { icon: 'icon-jifenguanli', text: '我的积分', path: '#00C4A5' },
  { icon: 'icon-dizhi', text: '地址管理', path: '/pages/my/address/index' },
  { icon: 'icon-shoucang', text: '我的收藏', path: '/pages/goods/collect/index' },
  { icon: 'icon-zuji11', text: '足迹', path: '/pages/goods/history/index' },
  // { icon: 'vip', text: '会员中心', color: '#FFAA00' },
  // { icon: 'icon-kefuguanli', text: '在线客服', path: '#00C4A5' },
  { icon: 'icon-qianbao', text: '我的钱包', path: '/pages/my/wallet/index' },
  { icon: 'icon-xitongshezhi', text: '系统设置', path: '/pages/my/system/index' },
])

const navigateTo = (path: string) => {
  uni.navigateTo({ url: path })
}
const navigateToOrder = (path: string, type: any) => {
  uni.navigateTo({ url: path + '?type=' + type })
}

const goUserSettings = () => {
  uni.navigateTo({
    url: '/pages/my/userSettings/index',
  })
}

// const unifiedHandle = async () => {
//   const platform = await detectPlatform()

//   switch (platform) {
//     case 'H5':
//       handleQQService()
//       break
//     case 'WEIXIN':
//       uni.showModal({
//         title: '温馨提示',
//         content: '请点击右上角...选择浏览器打开',
//         showCancel: false,
//       })
//       break
//     case 'APP':
//       plus.runtime.openURL(`mqqwpa://im/chat?chat_type=wpa&uin=${qqNumber}`)
//       break
//   }
// }

const handleQQService = () => {
  const qqNumber = '2928908360' // 替换实际客服QQ
  const ua = navigator.userAgent

  // 环境检测
  const isWeChat = /MicroMessenger/i.test(ua)
  const isMobile = /Android|webOS|iPhone|iPad|iPod/i.test(ua)

  // 通用跳转逻辑
  const qqJump = (scheme: string, webUrl: string) => {
    uni.setClipboardData({ data: qqNumber }) // 复制QQ到剪贴板

    setTimeout(() => {
      if (isMobile) {
        window.location.href = scheme
      } else {
        window.open(webUrl)
      }
    }, 500)
  }

  if (isWeChat) {
    uni.showModal({
      title: '提示',
      content: '请点击右上角菜单->选择浏览器打开',
      confirmText: '复制QQ号',
      success: () => {
        qqJump('', `https://wpa.qq.com/msgrd?v=3&uin=${qqNumber}`)
      },
    })
  } else {
    qqJump(`mqqwpa://im/chat?chat_type=wpa&uin=${qqNumber}`, `tencent://message/?uin=${qqNumber}`)
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  background: #f5f5f5;
}

.user-header {
  width: 690rpx;
  padding: 60rpx 30rpx 120rpx;
  background: linear-gradient(-90deg, $uni-bg-themes, $uni-bg-themes-abate);
  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 690rpx;
    .user-left {
      display: flex;
      justify-content: space-between;
    }
    .user-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 10rpx;
      .tabbar-shezhi {
        font-size: 42rpx;
      }
      .tip {
        font-size: 18rpx;
        color: white;
      }
    }
    .avatar {
      width: 110rpx;
      height: 110rpx;
      margin-right: 30rpx;
      border-radius: 50%;
    }

    .user-meta {
      .username {
        margin-bottom: 16rpx;
        font-size: 32rpx;
        color: #fff;
      }

      .vip-tag {
        display: flex;
        align-items: center;
        padding: 8rpx 24rpx;
        margin-top: 10rpx;
        font-size: 20rpx;
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 40rpx;
      }
    }
  }
}

.order-card {
  padding: 40rpx;
  margin: -80rpx 30rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;

    .title {
      font-size: 32rpx;
      font-weight: 600;
    }

    .view-all {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #999;
    }
  }

  .order-status {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;

    .status-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .status-text {
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.function-list {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx 20rpx;
  margin: 30rpx;
  background: #fff;
  border-radius: 24rpx;

  .grid-item {
    box-sizing: border-box;
    width: 20%;
    padding: 20rpx 0;

    .item-content {
      display: flex;
      flex-direction: column;
      align-items: center;

      .wd-icon {
        padding: 16rpx;
        margin-bottom: 16rpx;
        background: #f8f8f8;
        border-radius: 24rpx;
      }

      .item-text {
        font-size: 24rpx;
        line-height: 1.4;
        color: #666;
        text-align: center;
      }
    }
  }
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #eee;

  .item-left {
    display: flex;
    align-items: center;

    // .item-text {
    //   margin-left: 24rpx;
    //   font-size: 28rpx;
    // }
  }
}

.service-banner {
  margin: 40rpx 30rpx;
  overflow: hidden;
  border-radius: 24rpx;

  .banner-image {
    width: 100%;
    height: 160rpx;
  }
}
</style>
